<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>上网入口</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
            background-color: #272727;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            opacity:0.5;
            pointer-events:none;
        }

        h3 {
            color: white;
            margin-top: 25px;
            margin-bottom: 25px;
        }

        a {
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            margin: 5px;
            border: solid 1px #ff0000;
            border-radius: 6px;
            color: white;
            z-index:100;
        }

        a:link {
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
            background-color: #540515;
        }

        a:active {
            text-decoration: none;
        }

        .box {
            padding: 5px;
            color: white;
            white-space:nowrap;
        }
    </style>

</head>

<body>

    <canvas id="canvas"></canvas>


    <div class="box">
        <h3>常用网址</h3>

        <a href="https://gitee.com/cjz010">Gitee</a>
        <a href="https://www.qq.com">腾讯网</a>
        <a href="https://docs.qq.com">QQ文档</a>
        <a href="https://www.baidu.com">百度</a>        
    </div>



    <div class="box">
        <h3>影视娱乐</h3>
        <a href="https://y.qq.com">QQ音乐</a>
        <a href="https://v.qq.com">腾讯视频</a>
        <a href="https://www.bilibili.com/">bilibili</a>
    </div>

    <div class="box">
        <h3>工具</h3>
        <a href="https://cs.android.com/">Android源码</a>
        <a href="https://www.androidcup.com/">Android示例</a>
        <a href="https://www.xclient.info">xclient.info</a>
        <a href="https://appstorrent.ru/">TNT Team</a>
        <a href="https://tool.lu/c/developer">在线工具</a>
    </div>



    
    <script>
        (function () {
            let canvas = document.getElementById('canvas')
            let context = canvas.getContext('2d')
            let canvas_width = canvas.width = window.innerWidth
            let canvas_height = canvas.height = window.innerHeight
            let current = {
                x: null,
                y: null,
                max: 20000
            }
            let array = []
            let random = []

            init()

            function init() {
                for (let i = 0; i < 256; i++) {
                    random.push({
                        x: Math.random() * canvas_width,
                        y: Math.random() * canvas_height,
                        xa: Math.random() * 2 - 1,
                        ya: Math.random() * 2 - 1,
                        max: 10000
                    })
                }
                array = random.concat([current])
                setTimeout(() => {
                    draw()
                }, 1000)
            }

            function draw() {
                context.clearRect(0, 0, canvas_width, canvas_height)
                let tmp, i, x, y, dist, d
                random.forEach((node, index) => {
                    node.x += node.xa
                    node.y += node.ya
                    node.xa *= node.x > canvas_width || node.x < 0 ? -1 : 1
                    node.ya *= node.y > canvas_height || node.y < 0 ? -1 : 1
                    context.fillRect(node.x - 0.5, node.y - 0.5, 1, 1)
                    for (i = index + 1; i < array.length; i++) {
                        tmp = array[i]
                        if (null !== tmp.x && null !== tmp.y) {
                            x = node.x - tmp.x
                            y = node.y - tmp.y
                            dist = x * x + y * y
                            if (dist < tmp.max) {
                                if (tmp === current) {
                                    dist >= tmp.max / 2 && (node.x -= 0.03 * x, node.y -= 0.03 * y)
                                }
                                d = (tmp.max - dist) / tmp.max
                                context.beginPath()
                                context.lineWidth = d / 2
                                context.strokeStyle = 'rgba(204, 204, 204,' + (d + 0.2) + ')'
                                context.moveTo(node.x, node.y)
                                context.lineTo(tmp.x, tmp.y)
                                context.stroke()
                            }
                        }
                    }
                })
                window.requestAnimationFrame(draw)
            }

            window.onmousemove = (e) => {
                e = e || window.event;
                //这里注释掉可以禁用与鼠标的交互
                current.x = e.clientX
                current.y = e.clientY
            }
            window.onmouseout = () => {
                current.x = null
                current.y = null
            }
        })()
    </script>
</body>

</html>